<template>
  <div>
    <TheContainer :title="title">
      <Table border :columns="columns" :data="data">
        <template slot-scope="{ index }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="show(index)"
            >详情</Button
          >
          <Button type="error" size="small" @click="remove(index)"
            >删除</Button
          >
        </template>
      </Table>
    </TheContainer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "用户列表详情",
      form: {
        page: 2,
        size: 20,
      },
      columns: [
        {
          title: "用户名",
          align: "center",
          key: "nickname",
        },
        {
          title: "邮箱",
          align: "center",
          key: "email",
        },
        {
          title: "性别",
          align: "center",
          key: "gender",
        },
        {
          title: "最后修改时间",
          align: "center",
          key: "last_modified_time",
        },
        {
          title: "创建时间",
          align: "center",
          key: "created_time",
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      data: [],
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      this.$API
        .GET_ALL_USER(this.form)
        .then((res) => {
          this.data = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style></style>
